<!--
 * @Author: long
 * @Date: 2021-04-23 11:47:43
 * @LastEditTime: 2021-09-27 17:02:58
 * @LastEditors: Please set LastEditors
 * @Description: 面包屑导航
 * @FilePath: \inventory-apie:\hjimi\人脸辨识云\html\gitlab\pc\faceCloudWebsite\src\components\Breadcrumb\index.vue
-->
<style lang="less" scoped>
  .flex_align_center {
    padding-top: 15px;
  }
  .app-breadcrumb.el-breadcrumb {
  display: inline-block;
  font-size: 14px;
  line-height: 50px;
  margin-left: 8px;
  a {
    color:rgba(0, 0, 0, 0.85)
  }
  ::v-deep .el-breadcrumb__separator {
    color:rgba(0, 0, 0, 0.45)
  }
 }
  .no-redirect {
    color:#000!important;
    cursor: text;
  }
  .arrow {
    display:inline-block;
    font-size:18px;
    font-weight: bold;
&:hover {
  color: #1890ff;
}
  }
  .pageN {
    padding-left:30px;
  }
   .ant-page-header {
     padding-left:10px!important;
     & ::v-deep.ant-page-header-heading-title {
     font-weight:500!important;
   }
   }
.flex_align_center {
  margin-left:30px;
}
</style>
<template>
 <div>
 <div class="flex_align_center" v-show="breadcrumbIshow">
   <!-- <hamburger id="hamburger-container" :is-active="sidebar.opened" class="hamburger-container" @toggleClick="toggleSideBar" /> -->
   
    <a-breadcrumb class="app-breadcrumb" separator="/">
    <!-- <transition-group name="breadcrumb"> -->
      <a-breadcrumb-item v-for="(item,index) in levelList" :key="item.path">
        <span v-if="item.redirect === 'noRedirect' || index == levelList.length - 1" class="no-redirect" ref="nOredirect">
          {{ generateTitle(item.meta.title, true) }}
        </span>
        <a v-else @click.prevent="handleLink(item)">{{ generateTitle(item.meta.title) }}</a>
      </a-breadcrumb-item>
    <!-- </transition-group> -->
   </a-breadcrumb>
 </div>
  <div class="flex pageN item_center">
     <a-icon v-show="pageN" type="arrow-left" class="arrow" @click="backHandle" />
    <a-page-header
    :title="lastTit"
    :sub-title="subTitHandle()"
  />
  </div>
  </div>
</template>

<script>
import { generateTitle } from '@/utils/i18n'
import pathToRegexp from 'path-to-regexp'
import Hamburger from '@/components/Hamburger'
import { mapGetters } from 'vuex'
import { asyncRoutes } from '@/router'
export default {
  components: {
    Hamburger
  },
  data() {
    return {
      levelList: null,
      asyncRoutes: asyncRoutes,
      curTit: '',
      lastTit: '',
      breadcrumbIshow: true,
      pageN: false,
    }
  },
  watch: {
    $route(route) {
      // if you go to the redirect page, do not update the breadcrumbs
      if (route.path.startsWith('/redirect/')) {
        return
      }
      this.getBreadcrumb()

      Promise.resolve().then(() => this.lastTit = this.$store.state.nav.breadcrumbLastTit)

        this.filterNav()
        
        this.mainPx()

        this.subTitHandle()
    }
  },
   computed: {
    ...mapGetters([
      'sidebar',
    ])
  },
  methods: {
    generateTitle,
    getBreadcrumb() {
      // only show routes with meta.title
      let matched = this.$route.matched.filter(item => item.meta && item.meta.title)
      const first = matched[0]

      if (!this.isDashboard(first)) {
        // matched = [{ path: '/dashboard', meta: { title: 'dashboard' }}].concat(matched)
      }

      this.levelList = matched.filter(item => item.meta && item.meta.title && item.meta.breadcrumb !== false)
    },
    isDashboard(route) {
      const name = route && route.name
      if (!name) {
        return false
      }
      return name.trim().toLocaleLowerCase() === 'Dashboard'.toLocaleLowerCase()
    },
    pathCompile(path) {
      // To solve this problem https://github.com/PanJiaChen/vue-element-admin/issues/561
      const { params } = this.$route
      var toPath = pathToRegexp.compile(path)
      return toPath(params)
    },
    handleLink(item) {
      const { redirect, path } = item
      if (redirect) {
        this.$router.push(redirect)
        return
      }
      this.$router.push(this.pathCompile(path))
    },
     toggleSideBar() {
      this.$store.dispatch('app/toggleSideBar')
    },
    backHandle() {
      this.$router.go(-1)
    },
    filterNav() {
       if(this.levelList.length < 2) {
         this.breadcrumbIshow = false, this.pageN = false
       } else {
         this.breadcrumbIshow = true, this.pageN = true
       }
    },
    mainPx() {
      let MAIN_PX = document.getElementById('MAIN_PX')
         if(this.levelList.length < 2) {
           MAIN_PX.innerHTML = ''
         } else {
           MAIN_PX.innerHTML = '.app_container { margin-top: 30px; }'
         }
       },
       subTitHandle(path) {
       let paths = path ?? this.$route.name
         if(paths === 'addRole') {
           return 'IAM用户默认'
         } 
       }
  },
  created() {
    this.getBreadcrumb()
   
   new Promise((resolve) => {
     if(this.levelList) {
       resolve()
     }
   }).then(() => {
      this.filterNav()
   })
  },
  mounted() {
    this.$nextTick(() => {
     let body_el = document.getElementsByTagName('body')[0]
     let style_el = document.createElement('style')
         style_el.setAttribute('id','MAIN_PX')
         body_el.appendChild(style_el)

    this.lastTit = this.$store.state.nav.breadcrumbLastTit
    
    this.mainPx()

    this.subTitHandle()
 
    })
  }
}
</script>
